/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, {
  PropTypes
} from 'react';
import BaseComponent    from "../BaseComponent";
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';
import StoryActionCreators from '../../actions/StoryActionCreators';
import StoryStore from '../../stores/StoryStore';

@withStyles(styles)
class ContactPage extends BaseComponent {

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props);
    this.state = this.getState();
    this.stores = [StoryStore];
    StoryActionCreators.loadStories();
  }

  getState() {
    return {
      stories: StoryStore.getAll(),
      nextPage: StoryStore.nextPage(),
      loading: StoryStore.loading(),
    };
  }

  loadMoreStories() {
    StoryActionCreators.loadStories(this.state.nextPage);
  }

  render() {
    const title = 'Contact Us';
    this.context
      .onSetTitle(title);

    let nodes = this.state.stories.map(function(story, index) {
      return <li key={'story-' + index}>{story.content}</li>;
    });

    let loading = <p>Loading</p>;
    let loaded = <button className="btn" onClick={this.loadMoreStories.bind(this)}>加载更多</button>;

    return (
      <div className="ContactPage">
        <div className="ContactPage-container">
          <h1>{title}</h1>
          <ul>
            {nodes}
          </ul>

          {this.state.loading ? loading : loaded}
        </div>
      </div>
    );
  }

}

export default ContactPage;
